<template>
  <div ref="chart" style="width: 100%; height: 400px"></div>
</template>

<script>
import * as echarts from "echarts";
import chinaMap from '../../node_modules/echarts/map/json/china.json'//导入中国地图
export default {
  data() {
    return {
      lists: [],
    };
  },
  methods: {
    //初始化websocket
   /*  initWebsocket() {
      let ws = new WebSocket("ws://127.0.0.1:8090");
      //连接成功触发
      ws.onopen = function () {
        alert("连接成功");
      };
      //连接失败触发
      ws.onerror = function () {
        alert("连接失败");
      };
      //接收消息（数据）
      ws.onmessage = (res) => {
        console.log(res);
        let data = JSON.parse(res.data);
        this.lists = data.message;
        this.init();
      };
    }, */
    init() {
      //初始化
      let mychart = echarts.init(this.$refs.chart);
      echarts.registerMap('china',chinaMap)

      //图标的配置信息和数据
      const option = {
        series: [
          {
            type: 'map',
           map:'china',
           label:{
            show:true,
            color:'#fff'
           },
           itemStyle:{
            areaColor:'#219edb',
            borderColor:'#fff'
           }
          },
        ],
      };
      //配置项和数据显示
      mychart.setOption(option);
    },
  },
  mounted() {
    this.init();
    //this.initWebsocket();
  },
};
</script>

<style lang="scss" scoped>
</style>